/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import { Form, Input, Table, Select, Button, Space, Spin, message } from 'antd';
import { If } from 'babel-plugin-jsx-control-statements';
import { useBoolean } from 'ahooks';
import qs from 'qs';
import { Link, useHistory } from 'react-router-dom';
import Cookies from 'js-cookie';
import RequestApi from '@/utils/request';
import css from './index.scss';

export default () => {
	const userId = Cookies.get('id');
	const [form] = Form.useForm();
	const history = useHistory();
	const [data, setData] = useState();
	const [loading, { setTrue, setFalse }] = useBoolean(false);

	const defaultPageSize = 20;
	useEffect(() => {
		setTrue();
		RequestApi.connection('get', `parkLotRecordTask/getParkRecordList/${-1}/${userId}/${1}/${defaultPageSize}`).then(
			(res) => {
				setData(res.data);
				setFalse();
			}
		);
	}, []);

	const deleteTask = (id) => {
		RequestApi.connection('delete', `parkLotRecordTask/delete/${id}`)
			.then(() => {
				message.success('删除成功');
				// 重新渲染数据
				RequestApi.connection(
					'get',
					`parkLotRecordTask/getParkRecordList/${-1}/${userId}/${1}/${defaultPageSize}`
				).then((res) => {
					setData(res.data);
				});
			})
			.catch((err) => {
				message.error('删除失败', err);
			});
	};

	const cancellation = (id) => {
		RequestApi.connection('get', `parkLotRecordTask/cancellation/${id}`)
			.then(() => {
				message.success('作废成功');
				// 重新渲染数据
				RequestApi.connection(
					'get',
					`parkLotRecordTask/getParkRecordList/${-1}/${userId}/${1}/${defaultPageSize}`
				).then((res) => {
					setData(res.data);
				});
			})
			.catch((err) => {
				message.error('作废失败', err);
			});
	};

	const reset = () => {
		console.log('重置');
	};

	const onFinish = (values) => {
		console.log('Success:', values);
	};

	const onFinishFailed = (errorInfo) => {
		console.log('Failed:', errorInfo);
	};

	const toAdd = () => {
		history.push('/parking-record/add');
	};
	/**
	 * 状态
	 * 0 草稿
	 * 1 审核中
	 * 2 已退回
	 * 3 已废弃
	 * 4 已完成（审核流程完成）
	 */
	/**
	 * 环节
	 * 0在线提交备案信息
	   1区停车办资料初核
	   2区停车办现场勘察
	   3区市镇级备案审核
	 */
	const columns = [
		{
			title: '功能列',
			dataIndex: 'status',
			render: (text, record) => {
				return (
					<div>
						<If condition={text === 0}>
							<Space>
								<Link
									to={{
										pathname: `/parking-record/editor`,
										search: qs.stringify({ id: record.id }),
									}}
								>
									编辑
								</Link>
								{/* 解决react渲染就加载的问题 */}
								<Button type="link" danger onClick={() => deleteTask(record.id)}>
									删除
								</Button>
								<Link
									to={{
										pathname: `/parking-record/check`,
										search: qs.stringify({ id: record.id, value: 1, type: record.type, stage: record.stage }),
									}}
								>
									详情
								</Link>
								<Link
									to={{
										pathname: `/parking-record/check`,
										search: qs.stringify({ id: record.id, value: 2, type: record.type, stage: record.stage }),
									}}
								>
									流程覆历
								</Link>
							</Space>
						</If>
						<If condition={text === 1}>
							<Space>
								<Link
									to={{
										pathname: `/parking-record/check`,
										search: qs.stringify({ id: record.id, value: 1, type: record.type, stage: record.stage }),
									}}
								>
									详情
								</Link>
								<Link
									to={{
										pathname: `/parking-record/check`,
										search: qs.stringify({ id: record.id, value: 2, type: record.type, stage: record.stage }),
									}}
								>
									流程覆历
								</Link>
							</Space>
						</If>
						<If condition={text === 2}>
							<Space>
								<Link
									to={{
										pathname: `/parking-record/update`,
										search: qs.stringify({ id: record.id, stage: record.stage, type: record.type }),
									}}
								>
									整改
								</Link>
								<Button type="link" danger onClick={() => cancellation(record.id)}>
									作废
								</Button>
								<Link
									to={{
										pathname: `/parking-record/check`,
										search: qs.stringify({ id: record.id, value: 1, type: record.type, stage: record.stage }),
									}}
								>
									详情
								</Link>
								<Link
									to={{
										pathname: `/parking-record/check`,
										search: qs.stringify({ id: record.id, value: 2, type: record.type, stage: record.stage }),
									}}
								>
									流程覆历
								</Link>
							</Space>
						</If>
						<If condition={text === 4}>
							<Space>
								<Link
									to={{
										pathname: `/parking-record/check`,
										search: qs.stringify({ id: record.id, value: 1, type: record.type, stage: record.stage }),
									}}
								>
									详情
								</Link>
								<Link
									to={{
										pathname: `/parking-record/check`,
										search: qs.stringify({ id: record.id, value: 2, type: record.type, stage: record.stage }),
									}}
								>
									流程覆历
								</Link>
							</Space>
						</If>
					</div>
				);
			},
			ellipsis: true,
		},
		{
			title: '停车场名称',
			dataIndex: 'name',
			ellipsis: true,
		},
		{
			title: '备案项目',
			dataIndex: 'type',
			ellipsis: true,
			render: (text) => {
				return (
					<div>
						<If condition={text === 0}>
							<span>申办</span>
						</If>
						<If condition={text === 1}>
							<span>变更</span>
						</If>
					</div>
				);
			},
		},
		{
			title: '所在环节',
			dataIndex: 'stage',
			ellipsis: true,
			render: (text) => {
				return (
					<div>
						<If condition={text === 0}>
							<span>在线提交备案信息</span>
						</If>
						<If condition={text === 1}>
							<span>区停车办资料初核</span>
						</If>
						<If condition={text === 2}>
							<span>区停车办现场勘查</span>
						</If>
						<If condition={text === 3}>
							<span>区市镇级备案审核</span>
						</If>
					</div>
				);
			},
		},
		{
			title: '状态',
			dataIndex: 'status',
			ellipsis: true,
			render: (text) => {
				return (
					<div>
						<If condition={text === 0}>
							<span>草稿</span>
						</If>
						<If condition={text === 1}>
							<span>审核中</span>
						</If>
						<If condition={text === 2}>
							<span>已退回</span>
						</If>
						<If condition={text === 4}>
							<span>已完成</span>
						</If>
					</div>
				);
			},
		},
		{
			title: '所属区域',
			dataIndex: 'districtName',
			ellipsis: true,
		},
		{
			title: '流水号',
			dataIndex: 'sno',
			ellipsis: true,
		},
		{
			title: '申请时间',
			dataIndex: 'submitTime',
			ellipsis: true,
		},
		{
			title: '完成时间',
			dataIndex: 'finishedTime',
			ellipsis: true,
		},
	];

	return (
		<>
			<Form form={form} className={css.table_list_form} onFinish={onFinish} onFinishFailed={onFinishFailed}>
				<Space>
					<Form.Item name="status" label="状态: ">
						<Select style={{ width: 120 }} placeholder="请选择状态">
							<Select.Option value="草稿">草稿</Select.Option>
							<Select.Option value="审核中">审核中</Select.Option>
							<Select.Option value="已完成">已完成</Select.Option>
							<Select.Option value="已退回">已退回</Select.Option>
						</Select>
					</Form.Item>
					<Form.Item name="name" label="停车场名: ">
						<Input placeholder="请输入关键字" style={{ width: 200 }} allowClear />
					</Form.Item>
					<div className={css.button}>
						<Button type="primary" htmlType="submit">
							查询
						</Button>
						<Button onClick={reset}>重置</Button>
						<Button type="primary" onClick={toAdd}>
							新增备案
						</Button>
					</div>
				</Space>
			</Form>
			<Spin spinning={loading} tip="加载中...">
				<If condition={data !== undefined}>
					<Table
						size="small"
						bordered
						columns={columns}
						scroll={{ x: 2000, y: 'calc(100vh - 290px)' }}
						dataSource={data}
					/>
				</If>
			</Spin>
		</>
	);
};
